<template>
  <div :class="{ 'sidebar-collapsed': !appStore.sidebar.opened }" class="main-layout">
    <!-- 导航栏 -->
    <nav class="glass-navigation">
      <div class="nav-left">
        <button
          class="nav-toggle btn-glass"
          @click="appStore.toggleSidebar()"
        >
          <tiny-icon-menu />
        </button>
        <div class="nav-brand">家庭媒体</div>
      </div>

      <div class="nav-right">
        <!-- 通知中心 -->
        <NotificationCenter
          @notification-click="handleNotificationClick"
          @settings-changed="handleNotificationSettings"
        />

        <!-- 主题切换 -->
        <button class="theme-toggle btn-glass" @click="appStore.toggleTheme()">
          <tiny-icon-moon v-if="appStore.theme === 'light'" />
          <tiny-icon-sun v-else />
        </button>

        <!-- 用户下拉菜单 -->
        <tiny-dropdown class="user-dropdown" trigger="hover">
          <template #reference>
            <div class="user-info btn-glass">
              <img
                :alt="authStore.user?.nickname"
                :src="authStore.user?.avatar || '/default-avatar.png'"
                class="user-avatar"
              />
              <span class="user-name">{{ authStore.user?.nickname || '用户' }}</span>
            </div>
          </template>
          <template #dropdown>
            <div class="glass-dropdown">
              <div class="dropdown-item" @click="goToProfile">
                <tiny-icon-user />
                <span>个人资料</span>
              </div>
              <div class="dropdown-item" @click="goToSettings">
                <tiny-icon-setting />
                <span>设置</span>
              </div>
              <div class="dropdown-divider"></div>
              <div class="dropdown-item danger" @click="handleLogout">
                <tiny-icon-logout />
                <span>退出登录</span>
              </div>
            </div>
          </template>
        </tiny-dropdown>
      </div>
    </nav>

    <!-- 侧边栏 -->
    <aside v-show="appStore.sidebar.opened" class="glass-sidebar">
      <div class="sidebar-content">
        <!-- 导航菜单 -->
        <nav class="sidebar-nav">
          <router-link
            v-for="item in menuItems"
            :key="item.name"
            :class="{ active: $route.name === item.name }"
            :to="item.path"
            class="sidebar-item"
          >
            <component :is="item.icon" class="sidebar-icon" />
            <span class="sidebar-text">{{ item.title }}</span>
          </router-link>
        </nav>

        <!-- 存储空间显示 -->
        <div class="storage-info">
          <div class="storage-title">存储空间</div>
          <div class="storage-bar">
            <div
              :style="{ width: storagePercent + '%' }"
              class="storage-progress"
            ></div>
          </div>
          <div class="storage-text">
            {{ usedStorage }} / {{ totalStorage }}
          </div>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
      <router-view v-slot="{ Component, route }">
        <transition mode="out-in" name="page-fade">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>

    <!-- 移动端遮罩 -->
    <div
      v-if="appStore.device === 'mobile' && appStore.sidebar.opened"
      class="mobile-overlay"
      @click="appStore.closeSidebar()"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores/app'
import { useAuthStore } from '@/stores/auth'
import NotificationCenter from '@/components/social/NotificationCenter.vue'

const router = useRouter()
const appStore = useAppStore()
const authStore = useAuthStore()

const menuItems = ref([
  {
    name: 'Dashboard',
    path: '/dashboard',
    title: '控制台',
    icon: 'tiny-icon-home'
  },
  {
    name: 'MediaList',
    path: '/media',
    title: '媒体文件',
    icon: 'tiny-icon-image'
  },
  {
    name: 'DiaryList',
    path: '/diary',
    title: '日记本',
    icon: 'tiny-icon-edit'
  },
  {
    name: 'Family',
    path: '/family',
    title: '家庭管理',
    icon: 'tiny-icon-group'
  },
  {
    name: 'Settings',
    path: '/settings',
    title: '设置',
    icon: 'tiny-icon-setting'
  }
])

// 模拟存储空间数据
const usedStorage = ref('2.3 GB')
const totalStorage = ref('10 GB')
const storagePercent = computed(() => 23) // 2.3/10 * 100

const goToProfile = () => {
  router.push('/settings/profile')
}

const goToSettings = () => {
  router.push('/settings')
}

const handleLogout = async () => {
  await authStore.logout()
}

// 通知相关处理函数
const handleNotificationClick = (notification: any) => {
  console.log('Notification clicked:', notification)

  // 根据通知类型跳转到对应页面
  switch (notification.type) {
    case 'activity':
      if (notification.data?.activity?.id) {
        router.push(`/activity/${notification.data.activity.id}`)
      }
      break
    case 'comment':
      if (notification.data?.link) {
        router.push(notification.data.link)
      }
      break
    case 'like':
      if (notification.data?.media?.id) {
        router.push(`/media/${notification.data.media.id}`)
      }
      break
    case 'mention':
      if (notification.data?.link) {
        router.push(notification.data.link)
      }
      break
    default:
      break
  }
}

const handleNotificationSettings = (settings: any) => {
  console.log('Notification settings changed:', settings)
  // 这里可以保存到用户偏好设置
}
</script>

<style lang="scss" scoped>
.main-layout {
  display: flex;
  min-height: 100vh;
  transition: all $duration-normal ease;

  .glass-navigation {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 $spacing-6;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $z-index-sticky;
    backdrop-filter: blur(20px) saturate(180%);
    transition: all $duration-normal ease;

    .nav-left {
      display: flex;
      align-items: center;
      gap: $spacing-4;

      .nav-toggle {
        width: 40px;
        height: 40px;
        border-radius: $radius-lg;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all $duration-fast ease;

        &:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.05);
        }
      }

      .nav-brand {
        font-weight: $font-weight-bold;
        font-size: $font-size-xl;
        background: $gradient-primary;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: $spacing-3;

      .theme-toggle {
        width: 40px;
        height: 40px;
        border-radius: $radius-lg;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all $duration-fast ease;

        &:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.05);
        }
      }

      .user-info {
        display: flex;
        align-items: center;
        gap: $spacing-2;
        padding: $spacing-2 $spacing-3;
        border-radius: $radius-lg;
        cursor: pointer;
        transition: all $duration-fast ease;

        &:hover {
          background: rgba(255, 255, 255, 0.2);
        }

        .user-avatar {
          width: 32px;
          height: 32px;
          border-radius: $radius-full;
          object-fit: cover;
        }

        .user-name {
          font-weight: $font-weight-medium;
          font-size: $font-size-sm;
        }
      }
    }
  }

  .glass-sidebar {
    width: 280px;
    position: fixed;
    left: 0;
    top: 72px;
    bottom: 0;
    backdrop-filter: blur(24px) saturate(200%);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    z-index: $z-index-fixed;
    transform: translateX(0);
    transition: all $duration-normal ease;

    .sidebar-content {
      height: 100%;
      padding: $spacing-6;
      display: flex;
      flex-direction: column;
      gap: $spacing-8;

      .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: $spacing-2;

        .sidebar-item {
          display: flex;
          align-items: center;
          gap: $spacing-3;
          padding: $spacing-3 $spacing-4;
          border-radius: $radius-lg;
          text-decoration: none;
          color: $gray-700;
          font-weight: $font-weight-medium;
          font-size: $font-size-sm;
          transition: all $duration-fast ease;

          .sidebar-icon {
            width: 20px;
            height: 20px;
          }

          &:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(4px);
          }

          &.active {
            background: rgba($primary-500, 0.2);
            color: $primary-600;
            box-shadow: 0 4px 12px rgba($primary-500, 0.3);

            .sidebar-icon {
              color: $primary-500;
            }
          }
        }
      }

      .storage-info {
        background: rgba(255, 255, 255, 0.05);
        border-radius: $radius-lg;
        padding: $spacing-4;
        margin-top: auto;

        .storage-title {
          font-size: $font-size-sm;
          font-weight: $font-weight-medium;
          color: $gray-600;
          margin-bottom: $spacing-2;
        }

        .storage-bar {
          height: 6px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: $radius-full;
          margin-bottom: $spacing-2;
          overflow: hidden;

          .storage-progress {
            height: 100%;
            background: $gradient-primary;
            border-radius: $radius-full;
            transition: width $duration-slow ease;
          }
        }

        .storage-text {
          font-size: $font-size-xs;
          color: $gray-500;
          text-align: center;
        }
      }
    }
  }

  .main-content {
    margin-left: 280px;
    margin-top: 72px;
    padding: $spacing-6;
    flex: 1;
    min-height: calc(100vh - 72px);
    transition: all $duration-normal ease;
  }

  &.sidebar-collapsed {
    .glass-sidebar {
      transform: translateX(-100%);
    }

    .main-content {
      margin-left: 0;
    }
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: $z-index-modal-backdrop;
  }
}

.glass-dropdown {
  min-width: 180px;

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-2 $spacing-3;
    border-radius: $radius-md;
    cursor: pointer;
    transition: all $duration-fast ease;
    color: $gray-700;
    font-size: $font-size-sm;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateX(2px);
    }

    &.danger {
      color: $error;

      &:hover {
        background: rgba($error, 0.1);
      }
    }
  }

  .dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: $spacing-2 0;
  }
}

// 页面切换动画
.page-fade-enter-active,
.page-fade-leave-active {
  transition: all $duration-normal ease;
}

.page-fade-enter-from,
.page-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

// 响应式适配
@media (max-width: $breakpoint-md) {
  .main-layout {
    .glass-navigation {
      padding: 0 $spacing-4;
    }

    .glass-sidebar {
      width: 100vw;
      transform: translateX(-100%);

      &.opened {
        transform: translateX(0);
      }
    }

    .main-content {
      margin-left: 0;
      padding: $spacing-4;
    }
  }
}

// 暗色主题
[data-theme="dark"] {
  .main-layout {
    .glass-navigation {
      background: rgba(15, 15, 35, 0.8);
      border-color: $dark-glass-border;
    }

    .glass-sidebar {
      background: rgba(15, 15, 35, 0.6);
      border-color: $dark-glass-border;

      .sidebar-item {
        color: $gray-300;

        &:hover {
          background: rgba(255, 255, 255, 0.05);
        }

        &.active {
          background: rgba($primary-400, 0.15);
          color: $primary-400;
        }
      }

      .storage-info {
        background: rgba(255, 255, 255, 0.03);

        .storage-title {
          color: $gray-400;
        }
      }
    }
  }

  .glass-dropdown {
    background: rgba(37, 45, 63, 0.9);
    border-color: $dark-glass-border;

    .dropdown-item {
      color: $gray-300;

      &:hover {
        background: rgba(255, 255, 255, 0.08);
      }
    }
  }
}
</style>
